<%--
  Created by IntelliJ IDEA.
  User: ano
  Date: 2024/1/10
  Time: 14:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    /*获取项目的根路径*/
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://" + request.getServerName()+":"+request.getServerPort()+path+"/";
    /*basePath就是得到的跟路径类似于：http://localhost:8081/test/*/
%>
<html>
<head>
    <title>login</title>
    <link rel="stylesheet" href="<%=basePath%>/css/public.css">
    <script src="<%=basePath%>/js/jquery-3.7.1.min.js"></script>
    <%--在login页面引入layui框架--%>
    <link rel="stylesheet" href="<%=basePath%>/layui/css/layui.css">
    <script src="<%=basePath%>/layui/layui.js"></script>
</head>
<body style="background: linear-gradient(rgba(216,192,229,0.48), rgba(184,198,224,0.49))">
    <%--onsubmit="return false"：取消form表单的自动提交--%>
    <form class="loginForm" onsubmit="return false" style="margin: 35px">
        账号：<input type="text" name="userName" placeholder="请输入账号">
        <br>
        密码：<input type="password" name="password" placeholder="请输入密码">
        <br>
        <div class="options myFlex_x">
            <input class="doLogin" type="submit" value="登录" style="margin-right: 10px;">
            <input type="reset">
        </div>
    </form>
<script>
    $(".doLogin").click(function (){
        /*访问后端，将用户输入的数据提交到后端
        后端访问数据库，判断用户账号密码是否输入正确*/
        // 使用异步请求ajax（Web数据交互，无刷新请求），访问后端
        $.ajax({
            url:"<%=basePath%>/user?method=login",  // 请求地址
            type:"get",  // 请求方式
            /*get：请求参数以问号的形式跟在请求后面展示，快速，不需要过多验证，不安全
            * post：请求参数不会在请求地址上展示，会放在请求体的cookie中，更加安全，但是只能存放有限的参数*/
            data:$(".loginForm").serialize(),   // serialize：获取当前form表单中输入框的值
            success:function (result){  // 后台对Ajax的响应，也就是后台返回Ajax的结果result
                // JSON.parse是js的函数，将字符串result再转成对象
                var user=JSON.parse(result);
                if (user.id==0){
                    layer.msg('账号密码错误，登录失败！', {
                        icon: 2,// 弹窗样式
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    });
                }else{
                    layer.msg('登录成功！', {
                        icon: 1,// 弹窗样式
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        // 自动关闭弹窗：当你在iframe页面关闭自身时
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                        parent.location.reload();  // 重新加载
                    });
                }
            }
        })
    })
</script>
</body>
</html>
